<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="" id="form">
			<input type="file" multiple="multiple" name="file[]" id="file" value="" />
			<input type="button" id="btn" value="提交"/>
		</form>
		<div id="div">
			
		</div>
		
		<script type="text/javascript">
			$(function(){
				var file_data=[];
				var index=0;
				$('#file').change(function(){
					//console.log($(this));
					var Files=$(this).get(0);
					for (var i=0;i<Files.files.length;i++){
						//console.log(Files.files[i].name);
						//file_data.push(Files.files[i]);//把想要上传的内容添加到数组里
						file_data[index]=Files.files[i];//确定
						$('#div').append("<span index='"+index+"'>"+Files.files[i].name+"</span>"+"<br />")
						index++;
					}
				});
				$('#div').on('click','span',function(){
					var index=$(this).attr('index');
					file_data[index]=null;
					$(this).remove();
					//console.log(index);
				});
				$('#btn').click(function(){
					//var f=$('#form').get(0);
					//var form=new FormData(f);
					var form=new FormData(); 
					//form.append('file',file_data);用post以字符串上传
					for(var i=0;i<file_data.length;i++){
						if(!file_data[i]){
							continue;
						}
						form.append('file[]',file_data[i]);
					}
					$.ajax({
						type:"post",
						url:"/uploadfile.php",
						data:form,
						processData:false,
						contentType:false,
						success:function(mgs){
							console.log(mgs);
							file_data=[];//清空文件集合
							index=0;//位置初始化
						},
						xhr:function(){
							var http=new XMLHttpRequest();
							http.upload.addEventListener('progress',function(e){
								console.log('当前已提交的内容大小'+e.loaded);
								console.log('当前内容的总大小'+e.total);
							});
							return http;
						}
					});
				});
			});
		</script>
	</body>
</html>
